<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.headSearch {
	padding: 0 1rem 0 0;
}
.headSearch .searchIco {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	width: 1rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.headSearch .searchInput {
	background: #f5f5f5;
	padding: 0 0.5rem 0 2.25rem;
	height: 1.6rem;
	border-radius: 0.8rem;
	font-size: 0.7rem;
	color: #333;
}
	#footer {
		height: 2.5rem;
		padding: 0 0.75rem;
	}
	
</style>
</head>

<body>
	<div id="app">
		<div class="" id="header">
			<div class="headSearch aui-flex-col aui-flex-middle">
				<div class="aui-pull-left back" tapmode onClick="api.closeWin();"></div>
				<div class="flex-auto relative">
					<form action="" id="searchForm">
					<div class="searchIco"><img src="../../image/common/03.png" alt=""></div>
					<input type="search" v-model="search" class="searchInput" placeholder="搜索商品" id="searchInput">
					</form>
					<div class="inputDel" v-if="search" tapmode onClick="vuedata.search = ''"></div>
				</div>
			</div>
		</div>
		<div class="btmFix aui-flex-col aui-flex-middle aui-flex-between" id="footer">
			<div></div>
			<div class="comPublishBtn" tapmode onClick="save();">完成(<span id="len">{{selectLen}}</span>)</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	search: '',
	selectLen: 0
};
vm = new Vue({
	el: '#app',
	data: vuedata
});
apiready = function() {
	api.parseTapmode();
	var header = $api.byId('header');
	$api.fixStatusBar(header);
	var headerH = $api.offset(header).h;
	var footerH = $api.offset($api.byId('footer')).h;
	api.openFrame({
		name: 'search_product_frm',
		url: 'search_product_frm.html',
		rect: {
			x: 0,
			y: headerH,
			w: 'auto',
			h: 'auto',
			marginBottom: footerH
		},
		bgColor: '#f5f5f5',
		bounces: true,
		pageParam: api.pageParam
	});
};
function updateLen(n){
	vuedata.selectLen = n;
}
//搜索
$$('#searchForm').submit(function(){
	$$('#searchInput').blur();
	if( !vuedata.search ){
		return;
	}
	api.execScript({
		frameName: 'search_product_frm',
		script:'searchFn("'+ vuedata.search +'");'
	});
	return false;
});
function save(){
	api.execScript({
		frameName: 'search_product_frm',
		script:'save()'
	});
}
	
</script>
</html>
